<template>
  <DialogButton
    :submit-loading="changeLoading"
    :button-text="Data.changeBoard.dialogButtonText"
    :dialog-title="Data.changeBoard.dialogTitle"
    :submit-function="Data.changeBoard.submitFunction"
    :function-ok="Data.functionOk"
    :button-style="buttonStyle"
    @dialog-close="Data.functionOk = false"
  >
    <template #body>
      <el-form
        v-loading="loading"
        :model="Data.changeBoard.changeQuery"
        label-width="auto"
        :rules="changeRules"
        style="max-width: 600px"
      >
        <!-- <el-form-item
          label="选择图标"
        >
          <img-upload v-model="Data.changeBoard.changeQuery.icon" />
        </el-form-item> -->
        <el-form-item
          label="选择图片"
        >
          <img-upload v-model="Data.changeBoard.changeQuery.pic" />
        </el-form-item>
        <el-form-item
          label="话题名称"
          prop="name"
        >
          <el-input
            v-model="Data.changeBoard.changeQuery.name"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="话题描述"
        >
          <el-input
            v-model.number="Data.changeBoard.changeQuery.description"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <!-- WARN: 需要 sort --->
      </el-form>
    </template>
  </DialogButton>
</template>
<script setup>
import * as api from '@/api/point/board.js'
import DialogButton from '@/components/DialogButton.vue'

const changeLoading = ref(false)

const props = defineProps({
  sectionId: {
    type: Number,
    required: true
  },
  name: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  },
  buttonStyle: {
    type: String,
    required: true
  }
})

const Data = reactive({
  changeBoard: {
    dialogButtonText: '编辑',
    dialogTitle: '编辑话题',
    submitFunction: () => {
      changeLoading.value = true
      // 重新构造imgUrl
      // Data.changeBoard.changeQuery.imgUrl = `${import.meta.env.VITE_APP_BASE_API}/mall4cloud${Data.changeBoard.changeQuery.imgUrl}`
      if (Data.changeBoard.changeQuery.sort !== null && Data.changeBoard.changeQuery.name) {
        api.changeBoard(
          Data.changeBoard.changeQuery
        ).then(() => {
          ElMessage({
            message: '操作成功',
            type: 'success'
          })
          changeLoading.value = false
          Data.functionOk = true
          emits('workEnd')
        }).catch(() => {
          ElMessage.error('操作失败')
          changeLoading.value = false
        })
      } else {
        ElMessage.error('至少填写板块名称')
        changeLoading.value = false
      }
    },
    changeQuery: {
      sectionId: props.sectionId,
      icon: '',
      pic: '',
      name: props.name,
      description: props.description,
      sort: 0
    }
  },
  functionOk: false
})

const changeRules = {
  name: [
    { required: true, message: '请填写板块名称', trigger: 'blur' }
  ]
}

const emits = defineEmits(['workEnd'])

</script>
